<template>
	<view>
		<view class="head">
			<text>请根据实际情况<br>填写您的顺延需求</text>
		</view>
		<view class="from-wrapper">
			<view class="delay-wrapper">
				<text>推迟：</text>
				<input type="number" value="" v-model="delay_day" />
				<text>天</text>
			</view>
			<view class="give-foot-time">
				<text>送餐时间：<br><text>{{$db.timeStampToTime(time * 1000)}}</text></text>
			</view>
			<view class="tip">
				<text>备注：</text>
				<textarea type="text" placeholder="请填写原因" v-model="content"></textarea>
			</view>
		</view>
		<view class="btn-wrapper" @click="submitDelay">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: 0,
				time: '',
				delay_day: 1,
				content: ''
			};
		},
		onLoad(o) {
			if (o.order_id) {
				this.order_id = o.order_id
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData: function() {
				this.$api.getCycliceOrderDetail({
						order_id: this.order_id
					})
					.then(res => {
						// console.log(res);
						this.time = res.data.p_time + (res.data.dish_type == 1 ? res.data.wu_time : res.data.wan_time)
					})
			},
			submitDelay: function() {
				if(this.delay_day.length < 1){
					this.$db._ShowToast('请填写天数');
					return false;
				}
				if(this.content.length < 1){
					this.$db._ShowToast('请填写顺延原因');
					return false;
				}
				// 提交顺延时间
				this.$api.timeDelay({
						order_id: this.order_id,
						delay_day: this.delay_day,
						delay_reason: this.content
					})
					.then(res => {
						this.$db._ShowToast(res.msg, ()=>{
							this.$db._GoBack();
						})
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F9;
	}

	.head {
		box-sizing: border-box;
		padding-top: 62rpx;
		width: 100%;
		height: 300rpx;
		background: url('/static/order-delay-page/bg2@2x.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		text-align: center;

		text {
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: 700;
		}
	}

	.from-wrapper {
		margin: 40rpx auto;
		width: 626rpx;
		display: flex;
		flex-flow: column;
		align-items: center;
		text-align: center;
		background: url(/static/order-delay-page/bg3@2x.png);
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;

		.delay-wrapper {
			margin: 64rpx 0 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 24rpx;
				color: #3A3A3A;
			}

			input {
				margin: 0 50rpx 0 10rpx;
				padding: 10rpx 0;
				width: 142rpx;
				font-size: 28rpx;
				border: 1px solid #707070;
				border-radius: 12rpx;
			}
		}

		.give-foot-time {
			text {
				font-size: 22rpx;
				color: #3A3A3A;

				text {
					font-size: 26rpx;
					color: #DFBB50;
				}
			}
		}

		.tip {
			margin: 16rpx 0 0;

			text {
				font-size: 24rpx;
				color: #3A3A3A;
			}

			textarea {
				margin: 18rpx 0 34rpx;
				box-sizing: border-box;
				padding: 16rpx 30rpx;
				width: 444rpx;
				height: 192rpx;
				font-size: 24rpx;
				border: 1px solid #707070;
				border-radius: 14rpx;
				text-align: left;
			}
		}
	}

	.btn-wrapper {
		margin: 100rpx auto 0;
		width: 222rpx;
		height: 72rpx;
		background: #DFBB50;
		border-radius: 10rpx;
		text-align: center;

		text {
			color: #FFFFFF;
			line-height: 72rpx;
			font-size: 28rpx;
			font-weight: 700;
		}
	}
</style>
